*{
    -webkit-user-select: none;
    -webkit-tap-highlight-color: none;    
    -webkit-highlight: none;  
}
body{
    font-size: 16px;
    font-weight: normal;
    .cl6;
    font-family: 'helvetica neue';
    background: #fff;
}
input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea {
    -webkit-user-select: text;
    outline: 0;
    background-color: #fff;
    -webkit-appearance: none;
}
@design-width: 375px; // 设计稿宽度
@rem: @design-width / 10; // 10等分得到的rem基准px

.px2rem(@attr; @px) when (ispixel(@px)) {
    @{attr}: unit(@px / @rem, rem);
}

// 处理非px值
.px2rem(@attr; @px) when (default()) {
    @{attr}: @px;
}

.px2rem(@attr; @px1; @px2) when (ispixel(@px1)) and (ispixel(@px2)) {
    @{attr}: unit(@px1 / @rem, rem) unit(@px2 / @rem, rem);
}

.px2rem(@attr; @px1; @px2) when (ispixel(@px1)) and not (ispixel(@px2)) {
    @{attr}: unit(@px1 / @rem, rem) @px2;
}

.px2rem(@attr; @px1; @px2) when not (ispixel(@px1)) and (ispixel(@px2)) {
    @{attr}: @px1 unit(@px2 / @rem, rem);
}

// 处理非px值
.px2rem(@attr; @px1; @px2) when (default()) {
    @{attr}: @px1 @px2;
}
.loop(@a,@b,@c,@d,@e,@f,@g) when (@a >= @b) {
  .loop((@a - @c),@b,@c,@d,@e,@f,@g);    // 递归调用自身
  .@{e}@{a}{ @{d}: unit(@a,@f)/@g}; // 每次调用时产生的样式代码
}
.looprem(@a,@b,@c,@d,@e,@f,@g) when (@a >= @b) {
  .looprem((@a - @c),@b,@c,@d,@e,@f,@g);    // 递归调用自身
  .@{e}@{a}{ @{d}: unit(@a / @rem, rem)}; // 每次调用时产生的样式代码
}
.loop(44,10,2,font-size,f,px,1);
.looprem(20,0,2,margin,m,rem,1);
.looprem(26,0,2,margin-top,mt,rem,1);
.looprem(26,0,2,margin-left,ml,rem,1);
.looprem(20,0,2,margin-bottom,mb,rem,1);
.loop(10,0,1,opacity,opa,'',10);
.looprem(20,0,2,padding,p,rem,1);
.looprem(26,0,2,padding-top,pt,rem,1);
.looprem(26,0,2,padding-left,pl,rem,1);
.fh2 ~ .wx-content{
    .px2rem(padding-bottom; 160px);
}
.fh2-sub ~ .wx-content{
   .px2rem(padding-bottom; 110px);
}
.fh1 ~ .wx-content{
    .px2rem(padding-bottom; 100px);
}
.lhp{
    line-height: 1.45;
}
.cl3{
    color: #333;
}
.cl6{
    color: #666;
}
.cl9{
    color: #999;
}
.cl3c{
    color: #ccc;
}
.clf{
    color: #fff;
}
.clh{
    color: @colorbase;
}
.clh{
    color: @colorh;
}
.clhu{
    color: @colorhu;
}
.cll{
    color: @colorl;
}
.cllan{
    color: @colorlan;
}
.clc{
    color: @colorc;
}
.cl0{
    color: #000;
}
.bgf{
    background: #fff;
}
.bgf5{
    background: #f5f5f5;
}
.bge4{
    background: #e4e4e4;
}
.bgh {
  background: @colorbase;
}
.bgc {
  background: @colorc;
}
//工具类
.wkbox{
    display: -webkit-box;
    box-align:center;
    -webkit-box-align:center;
}
.wkbox .autoW{
    box-flex: 1;
    -webkit-box-flex: 1;
    display: block;
}
.wkbox-top{
    -webkit-box-align:start;
}
.wkbox-bottom{
    -webkit-box-align:end;
}
.wkbox-h{
    display: -webkit-box;
    box-align:end;
    -webkit-box-align:end;
    box-orient: vertical;
    -webkit-box-orient: vertical;
}
.wkbox-h .autoh{
    box-flex: 1;
    -webkit-box-flex: 1;
    display: block;
}
.none{
    display: none;
}
.block{
    display: block;
}
.fb {
    font-weight: bold
}
.fn {
    font-weight: normal
}
.tc{
    text-align: center;
}
.tr{
    text-align: right;
}
.tl{
    text-align: left;
}
.fixBottom{
    position: fixed;
    .px2rem(padding-bottom; 20px);
    z-index: 200;
    bottom: 0;
    width: 100%;
}
.plr30{
    .px2rem(padding-bottom; 30px);
    .px2rem(padding-right; 30px);
}

/*动画*/
.animated {
    -webkit-animation-duration: 1s;
       -moz-animation-duration: 1s;
        -ms-animation-duration: 1s;
         -o-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
       -moz-animation-fill-mode: forwards;
        -ms-animation-fill-mode: forwards;
         -o-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
          /*animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;*/
}
@-webkit-keyframes star {
    50% { opacity: 0;}
    50% { opacity: 1; -webkit-transform:scale(1.2)}
    100% {opacity: 1;-webkit-transform:scale(1)}
}

@keyframes star {
    50% { opacity: 0;}
    50% { opacity: 1; transform:scale(1.2)}
    100% {opacity: 1;transform:scale(1)}
}

.star {
    -webkit-animation-name: star;
    -moz-animation-name: star;
    -ms-animation-name: star;
    -o-animation-name: star;
    animation-name: star;
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -ms-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: forwards;
   -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.star2{
    animation-delay:.2s;
    -webkit-animation-delay:.2s;
}
.star3{
    animation-delay:.4s;
    -webkit-animation-delay:.4s;
}
.star4{
    animation-delay:.6s;
    -webkit-animation-delay:.6s;
}
.star5{
    animation-delay:.8s;
    -webkit-animation-delay:.8s;
}
.wx-radio-box{
    >span{
        display: inline-block;
        border: 1px solid #666;
        .px2rem(padding;4px;14px);
        font-size: 12px;
        .px2rem(border-radius; 4px);
        ~ span{
            .px2rem(margin-left; 8px);
        }
        &.active{
            .clf;
            .bgh;
            border: 1px solid @colorbase;
        }
    }
}
.icon {
   width: 24px;
   height: 24px;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
}
.canSelect{
    -webkit-user-select: all;
}
